<template>
  <!-- 问题反馈 -->
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="是否已读" prop="isRead">
        <el-select
          v-model="queryParams.isRead"
          placeholder="请选择是否已读"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in isReadList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="查询标题" prop="serviceTitle">
        <el-input
          v-model="queryParams.serviceTitle"
          placeholder="请输入查询标题"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <el-table-column label="反馈标题" align="center" prop="serviceTitle" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column label="是否反馈" align="center" prop="isReply" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.isReply == 1 ? '未反馈' : '已反馈' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否已读" align="center" prop="isRead" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.isRead == 0 ? '未读' : '已读' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈时间" align="center" prop="replyTime" width="180">
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="viewDetail(scope.row)"
          >查询</el-button>
          <el-button
            v-if="scope.row.isReply == 1"
            type="text"
            icon="el-icon-delete"
            size="mini"
            style="color: #ff4949"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增对话框 -->
    <el-dialog title="新增" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" :before-close="closeAdd">
      <div style="padding: 0px 30px" class="dialog-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="反馈标题" prop="serviceTitle">
            <el-input v-model="form.serviceTitle" placeholder="请输入反馈标题" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item label="反馈详情" prop="serviceContent">
            <el-input
              v-model="form.serviceContent"
              type="textarea"
              :rows="5"
              placeholder="请输入反馈详情"
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>
          <el-form-item>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="requesrHeader"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">附件上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传.xlsx, .xls文件</div>-->
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看详情对话框 -->
    <el-dialog title="查询反馈" :visible.sync="detail" width="500px" append-to-body :close-on-click-modal="false" :before-close="closeDetail">
      <div class="dialog-content">
        <div class="title-content">
          <div>
            <span class="content-span">反馈标题：</span>
            <span>{{ this.detailData.serviceTitle }}</span>
            <span v-if="this.detailData.informationType !== undefined">{{ '(' + this.detailData.informationType + ')' }}</span>
          </div>
        </div>
        <!--              <div class="release-conteng">-->
        <!--                <div style="padding-right: 20px">发布人：{{ this.detailData.pubByName }}</div>-->
        <!--                <div style="padding-left: 20px">发布时间：{{ this.detailData.releaseTime }}</div>-->
        <!--              </div>-->
        <!--              <hr>-->
        <div class="title-content">
          <span class="content-span">反馈详情 ∨</span>
        </div>
        <div class="content-detail">{{ this.detailData.serviceContent }}</div>
        <div class="file-content">
          <div class="file-title">附件：</div>
          <div class="file-name-content">
            <div v-for="item in fileData" class="file-name" @click="downloadFile(item)">{{ item.fileName + ' ' }}</div>
          </div>
        </div>
        <hr>
        <div class="title-content">
          <span class="content-span">反馈信息 ∨</span>
        </div>
        <div class="content-detail">{{ this.detailData.reply }}</div>
        <div class="file-content">
          <div class="file-title">附件：</div>
          <div class="file-name-content">
            <div v-for="item in replayFiles" class="file-name" @click="downloadFile(item)">{{ item.fileName + ' ' }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { addProblem, delProblem, problemDetail, problemList } from '@/api/problemFeedback'
import { getToken } from '@/utils/auth'
export default {
  name: 'Index',
  data() {
    return {
      detailData: {
        pubByName: '', // 发布人
        publishTitle: '', // 发布标题
        pubContent: '', // 发布内容
        releaseTime: '', // 发布时间
        informationType: '', // 类型
        files: [], // 文件
        reply: '', //
        replayFiles: [] // 反馈信息附件列表
      },
      // 是否已读字典
      isReadList: [
        {
          label: '已读',
          value: 1
        },
        {
          label: '未读',
          value: 0
        }
      ],
      requesrHeader: '', // 上传请求头token
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      fileList: [], // 上传组件文件列表
      filesave: [], // 重组后的文件列表
      form: {
        serviceTitle: '',
        serviceContent: '',
        serviceFiles: []
      },
      // 新增模态框状态
      open: false,
      // 详情模态框状态
      detail: false,
      fileData: [], // 反馈详情附件文件
      replayFiles: [], // 反馈信息附件文件
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      dictData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        serviceTitle: '',
        isRead: ''
      },
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      rules: {
        serviceTitle: [
          { required: true, message: '反馈标题不能为空', trigger: 'blur' }
        ],
        serviceContent: [
          { required: true, message: '反馈详情不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.requesrHeader = { 'Authorization': 'Bearer ' + getToken() }
    this.getList()
  },
  methods: {
    /** 查询字典类型列表 */
    getList() {
      this.loading = true
      problemList(this.addDateRange(this.queryParams)).then(response => {
        console.log('rows', response.rows)
        this.typeList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 新增模态框 */
    handleAdd() {
      this.reset()
      this.open = true
    },
    /** 提交表单 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          addProblem(this.form).then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess('新增成功')
              this.resetForm('form')
              this.fileList = []
              this.reset()
              this.open = false
              this.getList()
            }
          })
        }
      })
    }, /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除反馈标题为"' + row.serviceTitle + '"的数据项？').then(function() {
        return delProblem(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    /** 查看详情 */
    viewDetail(row) {
      console.log('row', row)
      problemDetail(row.id).then(response => {
        this.detailData = response.data
        this.fileData = response.data.serviceFiles
        this.replayFiles = response.data.replayFiles
        console.log('response.data.files', response.data.files)
        this.detail = true
      })
    },
    /** 下载文件 */
    downloadFile(data) {
      console.log('data', data)
      console.log('资源前缀----', process.env.VUE_APP_RESOURCE_PREFIX)
      window.open(process.env.VUE_APP_RESOURCE_PREFIX + data.fileUrl)
    },
    cancel() {
      this.resetForm('form')
      this.fileList = []
      this.reset()
      this.open = false
    },
    closeAdd() {
      this.resetForm('form')
      this.fileList = []
      this.reset()
      this.open = false
    },
    closeDetail() {
      this.getList()
      this.detail = false
    },
    uploadSuccess(file, fileList) {
      console.log(fileList)
      const data = {
        fileName: fileList.name,
        fileSize: fileList.size,
        fileType: 'SERVICE',
        fileUrl: fileList.response.fileName,
        id: fileList.uid
      }
      this.form.serviceFiles.push(data)
    },
    beforeUpload(file, fileList) {
    },
    handleRemove(file, fileList) {
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
      this.$confirm(`确定移除 ${file.name}？`).then(
        () => {
          const index = this.form.serviceFiles.map((item) => item.id).indexOf(file.uid)
          this.form.serviceFiles.splice(index, 1)
        }
      )
    },
    /** 重置表单 */
    reset() {
      this.form = {
        serviceContent: '',
        serviceTitle: '',
        serviceFiles: []
      }
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      // this.single = selection.length !== 1
      // this.multiple = !selection.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }

}
</script>

<style lang="scss" scoped>
.title-sty {
  color: #20a0ff;
  cursor: pointer
}
.dialog-content {
  .title-content {
    padding: 0px 30px;
    text-align: left;
    margin-bottom: 14px;
    .content-span {
      //font-size: 18px;
      font-weight: bold;
      display: inline
    }
  }
  .content-detail {
    border: 1px solid #606266;
    padding: 10px;
    margin: 0px 30px;
    margin-bottom: 14px;
    height: 200px;
    overflow-y: scroll;
  }
  .file-content {
    padding: 0px 30px;
    display: inline-block;
    .file-title {
      display: inline-block;
      vertical-align: top;
    }
    .file-name-content {
      display: inline-block;
      .file-name {
        color: #20a0ff;
        cursor: pointer;
        margin-bottom: 4px
      }
    }
  }
  .release-conteng {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
  }
}
::v-deep .el-dialog__body {
  padding: 0px;
  padding-bottom: 30px;
}
</style>
